<template>
    <el-checkbox-group
            v-model="checkedKeys"
            @change="change"
    >
        <el-checkbox
            style="margin-right: 20px"
            v-for="item in data"
            v-model:value="item.buttonName"
        >{{ item.buttonName }}</el-checkbox>
    </el-checkbox-group>
</template>

<script>
  export default {
    props: {
      id: String,
      options: Object,
    },
    name: "TaskBtn",
    data() {
      return {
        checkedKeys: [],
        data: [
          {
            buttonName: "暂存",
            description: "暂存",
            type: "primary",
            event: "apply",
          },
          {
            buttonName: "上报",
            description: "上报",
            type: "primary",
            event: "apply",
          },
          {
            buttonName: "审批",
            description: "审批",
            type: "primary",
            event: "approve",
          },
          {
            buttonName: "驳回",
            description: "驳回",
            type: "primary",
            event: "approve",
          },
          {
            buttonName: "收回",
            description: "收回",
            type: "primary",
            event: "revoke",
          },
          {
            buttonName: "签章",
            description: "签章",
            type: "primary",
            event: "signature",
          },
        ],
      }
    },
    watch: {
      id: {
        handler(val) {
          this.init();
        },
        immediate: true,
      },
    },
    methods: {
      init() {
        if (this.options.isNew && this.options.btns) {
          const map = this.options.btns;
          const value = map.get(this.id);
          if (value) {
            this.checkedKeys = value.buttonName.split(",");
          } else {
            this.checkedKeys = []
          }
        } else {
          const param = {
            procDefKey: this.options.procDefKey,
            taskDefKey:  this.id,
          }
          this.options.getBtn(param).then(res => {
            this.checkedKeys =  res || []
          });
        }
      },
      change() {
        const param = {
          buttonName: this.checkedKeys.join(","),
          procDefKey: this.options.procDefKey,
          taskDefKey: this.id,
        };
        if (this.options.isNew) {
          let map;
          if (!this.options.btns) {
            map = new Map();
            this.options.btns = map;
          } else {
            map = this.options.btns;
          }
          map.set(this.id, param);
        } else {
          this.options.saveBtn(param);
        }
      },
    }
  };
</script>

<style scoped>

</style>
